MVVM প্যাটার্নে UI কাস্টমাইজেশন এবং ডেটার উপস্থাপন করার জন্য DataTemplate এবং ControlTemplate খুবই গুরুত্বপূর্ণ দুটি টেমপ্লেট। এই দুটি টেমপ্লেটের মাধ্যমে আপনি View এর কন্ট্রোল এবং ডেটার উপস্থাপন পরিবর্তন করতে পারবেন। নিচে DataTemplate এবং ControlTemplate এর ব্যবহারের বিস্তারিত ব্যাখ্যা দেওয়া হলো।

DataTemplate

DataTemplate একটি XAML উপাদান যা UI তে ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। এটি Model এর ডেটাকে View এর জন্য উপযুক্তভাবে উপস্থাপন করতে সাহায্য করে। সাধারণত DataTemplate ব্যবহার করা হয় যখন আপনি ListView, ListBox, ComboBox অথবা অন্যান্য ডেটাবাউন্ড কন্ট্রোলের মধ্যে ডেটা উপস্থাপন করতে চান।

DataTemplate এর সুবিধা:

• ডেটাকে কাস্টম UI উপাদান হিসেবে উপস্থাপন করা যায়।
• কোড এবং UI কে আলাদা করে রাখতে সাহায্য করে, ফলে MVVM প্যাটার্নের সাথে সঙ্গতিপূর্ণ হয়।
• একাধিক ListBox বা ListView এর আইটেমের জন্য একই DataTemplate ব্যবহার করা সম্ভব।

DataTemplate উদাহরণ:

ধরা যাক, আপনার একটি Product ক্লাস আছে, যেখানে Name এবং Price প্রপার্টি রয়েছে। এই Product ডেটাকে ListBox-এ উপস্থাপন করতে DataTemplate ব্যবহার করা হবে।

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

এখন, XAML এ এই ডেটা DataTemplate ব্যবহার করে উপস্থাপন করা হবে:

<Window.Resources>
    <DataTemplate x:Key="ProductTemplate">
        <StackPanel>
            <TextBlock Text="{Binding Name}" FontSize="18"/>
            <TextBlock Text="{Binding Price, StringFormat={}{0:C}}" FontSize="14"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

<ListBox ItemsSource="{Binding Products}" ItemTemplate="{StaticResource ProductTemplate}" />

এখানে:

• Products হল ViewModel এর একটি প্রপার্টি যা Product অবজেক্টের একটি সংগ্রহ।
• DataTemplate এ Name এবং Price প্রপার্টি গুলি TextBlock এর মাধ্যমে উপস্থাপন করা হয়েছে।
• StringFormat={}{0:C} ফরম্যাটের মাধ্যমে Price কে মুদ্রার চিহ্নসহ দেখানো হয়েছে।

ControlTemplate

ControlTemplate হল একটি UI কন্ট্রোলের কাঠামো বা চেহারা সম্পূর্ণভাবে কাস্টমাইজ করার উপায়। এটি UI কন্ট্রোলের চেহারা পরিবর্তন করে, কিন্তু তার কার্যকারিতা বা লজিক অপরিবর্তিত রাখে। ControlTemplate ব্যবহারের মাধ্যমে, আপনি কন্ট্রোলের উপস্থাপন এবং স্টাইল সম্পূর্ণভাবে কাস্টমাইজ করতে পারেন।

ControlTemplate এর সুবিধা:

• কন্ট্রোলের অভ্যন্তরীণ কাঠামো সম্পূর্ণভাবে পরিবর্তন করা সম্ভব, যেমন একটি Button বা TextBox এর স্টাইল পরিবর্তন করা।
• কন্ট্রোলের আচরণ অপরিবর্তিত রেখে শুধু তার ভিজ্যুয়াল স্টাইল পরিবর্তন করা যায়।

ControlTemplate উদাহরণ:

ধরা যাক, আপনি একটি Button কন্ট্রোলের স্টাইল পরিবর্তন করতে চান, এবং সেই Button-এ কাস্টম গ্রাফিক্যাল উপস্থাপন করতে চান। আপনি এটি ControlTemplate এর মাধ্যমে করতে পারেন।

<Button Content="Click Me" Width="200" Height="50">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Fill="LightBlue" Width="200" Height="50" />
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

এখানে:

• Button কন্ট্রোলের ControlTemplate কে কাস্টমাইজ করা হয়েছে, যেখানে একটি Ellipse (বৃত্ত) তৈরি করা হয়েছে যা বাটনের ব্যাকগ্রাউন্ড হিসেবে কাজ করবে।
• ContentPresenter ব্যবহার করা হয়েছে বাটনের ভিতরের কন্টেন্ট (যেমন, "Click Me" টেক্সট) প্রদর্শন করতে।
• আপনি যখন Button টিতে ক্লিক করবেন, তখন এর কার্যকারিতা পরিবর্তিত হবে না, কিন্তু ভিজ্যুয়ালভাবে এটি একটি কাস্টম বাটন হিসেবে উপস্থাপিত হবে।

DataTemplate এবং ControlTemplate এর মধ্যে পার্থক্য

DataTemplate এবং ControlTemplate এর মধ্যে কিছু গুরুত্বপূর্ণ পার্থক্য রয়েছে:

• DataTemplate ডেটাকে উপস্থাপন করার জন্য ব্যবহৃত হয়, যখন আপনি ডেটাবাউন্ড কন্ট্রোলের মাধ্যমে ডেটা প্রেজেন্ট করতে চান।
• ControlTemplate কন্ট্রোলের কাঠামো এবং চেহারা কাস্টমাইজ করতে ব্যবহৃত হয়, এটি কন্ট্রোলের উপস্থাপনা পরিবর্তন করে কিন্তু তার আচরণ অপরিবর্তিত রাখে।
• DataTemplate ডেটার ফরম্যাটিং এবং উপস্থাপনা পরিবর্তন করতে ব্যবহৃত হয়, যেমন একটি তালিকায় প্রতিটি আইটেম কিভাবে দেখাবে।
• ControlTemplate ব্যবহার করে কন্ট্রোলের অভ্যন্তরীণ উপাদান এবং চেহারা কাস্টমাইজ করা যায়, যেমন বাটন, টেক্সটবক্স বা স্লাইডার এর স্টাইল কাস্টমাইজ করা।

উপসংহার

• DataTemplate এবং ControlTemplate উভয়ই MVVM প্যাটার্নে UI কাস্টমাইজেশন এবং ডেটা উপস্থাপনার জন্য শক্তিশালী টুল।
• DataTemplate ডেটা উপস্থাপনের জন্য ব্যবহৃত হয়, যেখানে ডেটার কাঠামো এবং ভিজ্যুয়াল রেন্ডারিং কাস্টমাইজ করা যায়।
• ControlTemplate কন্ট্রোলের কাঠামো এবং ভিজ্যুয়াল স্টাইল কাস্টমাইজ করতে ব্যবহৃত হয়, যা UI কন্ট্রোলের ব্যবহারিক আচরণ অপরিবর্তিত রাখে।

এগুলি ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের UI এবং UX কে আরও ইউজার-ফ্রেন্ডলি এবং কাস্টমাইজড করতে পারবেন।